import React from "react";
import { Card, Button, List } from "antd";
import { Link } from "react-router-dom";

import { BrowserRouter as Router } from "react-router-dom";

const { Meta } = Card;

// 假设这是您的工具数据
const toolsData = [
  {
    title: "用 ai 生成 tailwindcss 的 html 页面1",
    description: "使用 AI 技术快速生成 HTML 页面布局1",
    href: "https://tool.lu/genui/",
    category: "开发类",
  },
  {
    title: "用 ai 生成 tailwindcss 的 html 页面2",
    description: "使用 AI 技术快速生成 HTML 页面布局2",
    href: "https://tool.lu/genui/",
    category: "开发类",
  },
  // ...更多工具数据
];

const ToolsList = () => {
  return (
    <Router>
      <List
        itemLayout="horizontal"
        dataSource={toolsData}
        renderItem={(item, index) => (
          <List.Item>
            <Card
              hoverable
              style={{ width: 300 }}
              cover={<img alt="example" src={require("./logo192.png")} />}
              actions={[
                <Button key="view" type="primary">
                  <Link
                    to={item.href}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    进入
                  </Link>
                </Button>,
              ]}
            >
              <Meta
                title={
                  <a href={item.href} target="_blank" rel="noopener noreferrer">
                    {item.title}
                  </a>
                }
                description={item.description}
              />
              <div className="category">{item.category}</div>
            </Card>
          </List.Item>
        )}
      />
    </Router>
  );
};

export default ToolsList;
